<template>
  <van-swipe :autoplay="3000" lazy-render style="height: 120vm">
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" :style="{ width: '100%', height: '100%' }" />
    </van-swipe-item>
  </van-swipe>

  <div class="container-wrapper">
    <div
      v-for="item in arrlist"
      :key="item.id"
      class="container"
      @click="xq(item.goods_id)"
    >
      <div class="image-container">
        <van-image round :src="item.img_big_logo" class="van-image" />
      </div>
      <van-row justify="space-between" :style="{ marginTop: '2.6vw' }">
        <van-col span="20">{{ item.title }}</van-col>
      </van-row>
      <van-row justify="space-between" :style="{ marginTop: '2.6vw' }">
        <van-col span="20">{{ item.category }}</van-col>
      </van-row>
      <van-row justify="space-between" :style="{ marginTop: '2.6vw' }">
        <van-col span="20">{{ item.price }}</van-col>
      </van-row>
    </div>
  </div>
  <van-tabbar v-model="active" placeholder>
    <van-tabbar-item icon="home-o" to="/home">主页</van-tabbar-item>
    <van-tabbar-item icon="search" to="/about">购物车</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/my">我的</van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/video">视频</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
import { ref } from 'vue'
// import axios from 'axios'
import http from '../xyq.js'
import { useRouter } from 'vue-router'

let arrinfo = ref([])
// const route = useRoute();
const router = useRouter() // 引入并实例化 router

const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]
const active = ref(0)
let arrlist = ref([])

http.get('/goods/list').then(res => {
  arrlist.value = res.data.list
})

const xq = id => {
  http
    .get('/goods/item', {
      params: {
        id: id,
      },
    })
    .then(res => {
      arrinfo.value = JSON.stringify(res.data.info)
      console.log(arrinfo.value)
      router.push({ name: 'xq', params: { arr: arrinfo.value } })
    })
}
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.container-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 每行显示两个容器 */
  gap: 20px;
  /* 容器之间的间距 */
  margin: 10px;
}

.container {
  width: 100%;
  box-sizing: border-box;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10vm;
}

.van-image {
  width: 4vm;
  height: 4vm;
}
</style>
